<template>
    <div class="markdown">
  <!-- 面包屑导航 -->
      <div class ='breadcrumb'>
    <el-breadcrumb separator="/" class="drag-title">
      <el-breadcrumb-item class="drag-item1"> <el-icon><alarm-clock /></el-icon>文件处理</el-breadcrumb-item>
      <el-breadcrumb-item>markdown 编辑器</el-breadcrumb-item>
    </el-breadcrumb>
     </div>
    
        <div class="content">
            <MdEditor v-model="text" :options="mdEditor" theme="light" 
                @onUploadImg="onUploadImg"
                @save="codeSave"
            >
                </MdEditor>
        <div class="button">  
              <el-button type="primary" @click="submit">提交</el-button>
            
                </div>
        </div>
    </div>
</template> 

<script setup lang="ts"> 
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css';
import { ElNotification } from 'element-plus'
import {ref,reactive,toRefs,onMounted,getCurrentInstance} from 'vue'

const {proxy} =getCurrentInstance()
const  text =ref('')
// 提交

const submit =()=>{
    ElNotification.success({
    title: '提示',
    message: '提交成功啦！',
    showClose: false,
    duration:1000
  })
}
// 保存
const codeSave=(v:string)=>{
     ElNotification.success({
    title: '提示',
    message: '保存成功',
    showClose: false,
    duration:1000

  })
localStorage.setItem('codeSave',v)
}

// 上传图片


onMounted(() => {
    if(localStorage.getItem('codeSave')){
        text.value=localStorage.getItem('codeSave')
    }
  
})

</script>

<style scoped>
    .button{
        margin-top:10px;
    }
    .el-icon{
        vertical-align: top;
        margin-right: 5px;
    }
    .content{
        width: 90%;
        
        margin: 50px auto;
        box-sizing: border-box;
        padding: 10px;
    }
</style>